<template>
    <div class="top">
      <img src="@/assets/aiScreen/top.png" class="background"/>
      <div class="text-container">
        <span class="leftTitle">企智库已连续运行 <span class="dayCount">{{count}}</span></span>
        <span class="centerTitle">企智库人工智能数据监测中心</span>
        <span class="rightTitle">{{ formattedTime }}</span>
      </div>
    </div>
</template>
  
  <script>
import { connrequest } from "@/api/firstPage.js"
import { formatDuration } from "@/utils/index.js"

  export default {
    name: "topForm",
    props: {},
    data () {
      return {
        count: 129,
        currentTime: new Date()
      }
    },
    created () {},
    mounted () {
      this.GetFirstPage()
      this.timer = setInterval(() => {
        this.currentTime = new Date();
      }, 1000);
    },
    watch: {},
    computed: {
      formattedTime() {
        const date = this.currentTime;
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const weekday = weekdays[date.getDay()];
        return `${year}年${month}月${day}日 ${weekday} ${hours}:${minutes}:${seconds}`;
      },
      async GetFirstPage(){
      const res = await connrequest('GetFirstPage')
      this.count = formatDuration(res.Data.KeepRunningSeconds)
    }
    },
    methods: {},
    components: {},
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
  }
  </script>
  
  <style scoped>
  .top {
      position: relative; /* 保持相对定位 */
      height: 60px; /* 明确设置高度，或者根据内容自适应 */
      display: flex; /* 使用 Flex 布局 */
      align-items: center; /* 垂直居中 */
      overflow: hidden; /* 防止内容溢出 */
      z-index: 999; /*放置背景图片被颜色背景覆盖 */
  }
  
  .background {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
  }
  
  .text-container {
      position: relative; /* 相对于 .top 定位 */
      top: -20%;
      display: flex;
      justify-content: space-between; /* 分布子元素 */
      width: 100%;
      padding: 0 10px; /* 根据需要调整内边距 */
      box-sizing: border-box; /* 包含内边距在内 */
      /* 如果需要，可以设置 align-items 来垂直对齐文字 */
  }
  
  .leftTitle {
      color: #fff;
      margin-left: 35px;
  }
  
  .dayCount {
      color: #00d1eb;
  }
  
  .centerTitle {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 22px;
      
      font-family: 'Arial', sans-serif; /* 使用Arial字体 */
            font-size: 24px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            display: inline-block; /* 使元素成为行内块级元素 */
            line-height: 1; /* 调整行高 */
            background: linear-gradient(to bottom, #e7edf0, #a0cae2); /* 渐变背景 */
            -webkit-background-clip: text; /* 兼容Webkit内核浏览器 */
            background-clip: text; /* 标准属性 */
            -webkit-text-fill-color: transparent; /* 使文本颜色透明 */
    
  }
  
  .rightTitle {
      /* 不需要绝对定位 */
      margin-right: 35px;
      color: #00c1da;
  }
  </style>